<template>
	<view class="wrapper">
		<view class="title">当日累计上报数</view>

		<view class="statistics">
			<view class="statistics-list">
				<view class="statistics-list-title">孤儿</view>
				<view class="statistics-list-number">{{ dayData.orphan }}</view>
			</view>

			<view class="statistics-list">
				<view class="statistics-list-title">留守儿童</view>
				<view class="statistics-list-number">{{ dayData.leftBehind }}</view>
			</view>

			<view class="statistics-list">
				<view class="statistics-list-title bold">共</view>
				<view class="statistics-list-number">
					{{ dayData.orphan + dayData.leftBehind }}
				</view>
			</view>
		</view>

		<view class="title">当月累计上报数</view>
		<view class="statistics">
			<view class="statistics-list">
				<view class="statistics-list-title">孤儿</view>
				<view class="statistics-list-number">{{ monthData.orphan }}</view>
			</view>

			<view class="statistics-list">
				<view class="statistics-list-title">留守儿童</view>
				<view class="statistics-list-number">{{ monthData.leftBehind }}</view>
			</view>

			<view class="statistics-list">
				<view class="statistics-list-title bold">共</view>
				<view class="statistics-list-number">
					{{ monthData.orphan + monthData.leftBehind }}
				</view>
			</view>
		</view>

		<div class="space"></div>

		<view class="uni-segmented-control-wrapper">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#4BB7DB" inActiveColor="#F6F8FE"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<button type="default" @click="goToUnaccompanied" to="/pages/data-report/unaccompanied"
						class="report-button">
						<uni-icons type="arrow-up"></uni-icons>上报
					</button>
					<Unaccompanied />
				</view>
				<view v-show="current === 1">
					<button type="default" @click="goToLeftBehind" to="/pages/data-report/left-behind"
						class="report-button">
						<uni-icons type="arrow-up"></uni-icons>上报
					</button>
					<LeftBehind />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		HOST
	} from "../../static/js/const";

	import Unaccompanied from "./unaccompanied.vue";
	import LeftBehind from "./left-behind.vue";

	const items = ref(["孤儿", "留守儿童"]);
	const current = ref(0);

	let monthData = ref({
		orphan: 0,
		leftBehind: 0,
	});

	let dayData = ref({
		orphan: 0,
		leftBehind: 0,
	});

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	const goToUnaccompanied = () => {
		uni.navigateTo({
			url: "/pages/data-report/unaccompanied", // 页面相对路径（需在 pages.json 注册）
		});
	};

	const goToLeftBehind = () => {
		uni.navigateTo({
			url: "/pages/data-report/left-behind", // 页面相对路径（需在 pages.json 注册）
		});
	};

	onShow(() => {
		uni.request({
			url: `${HOST}/dir/from/orphan/statistics`,
			method: "POST",
			header: {
				"content-type": "application/json",
				Authorization: "Bearer " + uni.getStorageSync("accessToken"),
			},
			success: (res) => {
				if (res.data.status === "OK" && res.data.flag) {
					monthData.value.orphan = res.data.data.countMonth;
					dayData.value.orphan = res.data.data.countDay;
				} else if (Number(res.data.code) === 401) {
					uni.showToast({
						title: "登录超时",
						icon: "error",
					});
					uni.removeStorageSync("accessToken");
					uni.reLaunch({
						url: "/pages/login/index", // 这里的URL是登录页面的路径
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
					});
				}
			},
			fail: (err) => {
				console.error("请求失败", err);
				uni.showToast({
					title: "连接失败",
					icon: "error",
				});
			},
		});

		uni.request({
			url: `${HOST}/dir/from/leftBehindChildren/statistics`,
			method: "POST",
			header: {
				"content-type": "application/json",
				Authorization: "Bearer " + uni.getStorageSync("accessToken"),
			},
			success: (res) => {
				if (res.data.status === "OK" && res.data.flag) {
					monthData.value.leftBehind = res.data.data.countMonth;
					dayData.value.leftBehind = res.data.data.countDay;
				} else if (Number(res.data.code) === 401) {
					uni.showToast({
						title: "登录超时",
						icon: "error",
					});
					uni.removeStorageSync("accessToken");
					uni.reLaunch({
						url: "/pages/login/index", // 这里的URL是登录页面的路径
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "error",
					});
				}
			},
			fail: (err) => {
				console.error("请求失败", err);
				uni.showToast({
					title: "连接失败",
					icon: "error",
				});
			},
		});
	});
</script>

<style lang="scss" scoped>
	.wrapper::v-deep .uni-segmented-control-wrapper {
		border-radius: 10rpx;
		padding: 15rpx 0;

		.content {
			max-height: calc(100vh - 640rpx);
			overflow: auto;

			.uni-table-td {
				padding: 0 0 !important;
			}

			// .report-button {
			// 	margin-top: 5px !important;
			// }
		}
	}

	.report-button {
		font-size: 14px;
		margin-bottom: 15rpx;
	}
</style>